@import "../global/global";

$border-color: #e5e5e5;

.ring-error-bubble {
  z-index: 2;
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 0;
  left: 25*$ring-unit + 2; // fallback if calc is not supported
  left: calc(100% + 2px);
  min-height: 3*$ring-unit;
  padding-right: 2*$ring-unit;
  padding-left: 2*$ring-unit;
  line-height: 22px;

  border-radius: $ring-border-radius;
  border: 1px solid $border-color;

  @include ring-font(12px);
  white-space: nowrap;

  color: $ring-error-color;
  background: #FFF;
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);

  &.active {
    display: inline-block;
  }

  &:before {
    content: '';
    transform: rotate(45deg);
    z-index: $ring-invisible-element-z-index;

    position: absolute;
    top: 7px;
    left: -5px;

    display: block;
    width: $ring-unit;
    height: $ring-unit;

    border: 1px solid $border-color;
    border-right: none;
    border-top: none;

    background: #FFF;
  }

  &_material {
    &:before {
      display: none;
    }

    padding-left: $ring-unit;
    box-shadow: none;
    border: 0;
    background-color: transparent;
    background: none;
  }

  .ring-form__control & {
    top: 1px;
  }
}

/**
 * .ring-error-bubble requires a position: relative container.
 * Use this class if your markup doesn't have one.
 */
.ring-error-bubble-wrapper {
  position: relative;
}
